<template>
  <div class="login">
      <div class="logo">
          <div></div>
      </div>
      <div class="loginContent">
          <div class="loginLogo flex">
              <div class="leftLogo flex-1">
                <!-- <img src="../../assets/image/Logo1.png" alt=""> -->
              </div>
              
              <div class="login-title flex-2">The Portal</div>
          </div>
          <!-- 登录 -->
          <div class="logininner">
              <el-form :model="loginForm" status-icon style="text-align: left" :rules="loginRules" ref="loginForm" label-width="1rem" label-color="#f5f5f5" size="small" class="demo-ruleForm">

                <el-form-item style="color: #fff" label="用户名" prop="username">
                  <el-input placeholder="用户名/邮箱" v-model="loginForm.username"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="pass" class="loginPassword">
                  <el-input type="password" placeholder="密码" v-model="loginForm.pass"></el-input>
                </el-form-item>

                 <el-form-item  prop="remember" class="text-left">
                    <el-checkbox label="记住登录" v-model="loginForm.remember" name="type"></el-checkbox>
                </el-form-item>
               
                <el-form-item>
                    <el-button style="width: 100%" type="primary"  icon="el-icon-success" @click="submitForm('loginForm')">登录</el-button>
                </el-form-item>

                 <el-form-item class="text-left">
                   <div class="forgetPassword">
                      <a src="javascript:;">忘记密码</a>
                   </div>
                   <div class="foundUser">
                      <a src="javascript:;" to="addNewUser">创建用户</a>
                   </div>
                    
                </el-form-item>

            </el-form>

          </div>
      </div>
     <div class="footer">
         @2018-Ebistrategy
     </div>
  </div>
</template>

<script>

import {mapState, mapMutations} from 'vuex'
// import {loginStatus, testStatus} from '../../service/getDatas'

export default {
  name: "login",
  data() {
    // LOGIN RULES
     var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
    var username = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("用户名不能为空"));
      }
      callback();
    };

    return {
      loginForm: {
        pass: "",
        username: "",
        remember: false
      },
      loginRules: {
        pass: [{
              validator: validatePass,
              message: '请输入密码',
              trigger: 'blur'
          }
        ],
        username: [{ validator: username, trigger: "blur" }]
      }
    };
  },
  methods: {

     ...mapMutations([
        'RECORD_USERINFO',
    ]),
    /**
     * 表单验证
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log("submit!");
        //   this.loginSubmit(formName)
          this.$router.push('/home/view')
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

     /**
     * 重置表单
     */
    resetForm(formName) {
      this.$nextTick(function() {
          this.$refs[formName].resetFields();
         })
    },

  }
};
</script>

<style scoped>
.login {
       width: 100%;
       height: 100%;
       background: url('../../../static/earth.png') no-repeat;
       background-color: #ccc;
       background-position: center;
       background-size: 100% 100%;
       position: relative;
   }
   
   .logo {
       padding: 5px;
   }

    .logo div {
        height: 0.5rem;
        /* background: url(../../assets/img/logo.png) no-repeat; */
        
    }

    .login-title {
        display: flex;
        align-items: center;
        font-size: 0.25rem;
        font-weight: 800;
        color: #f5f5f5;
    }

    .leftLogo img {
        height: 0.5rem;
        vertical-align: middle;
    }

    .loginLogo {
        padding: 0.12rem;
        text-align: left;
        background-color: rgba(255,255,255, 0.3);
    }

   .loginContent {
       position: absolute;
       left: 50%;
       width: 40%;
       background-color: rgba(0,0,0,.5);
       top: 50%;
       transform: translate(-50%,-50%);
       border-radius:  0 6px 6px 0;
       overflow: hidden;
       border-radius: 0.1rem;
   }
   
   .loginContent .el-input__inner {
       width: 80% !important;
   }

   .login .el-checkbox {
       color: #ccc;
   }

   .logininner, .forget, .addNewUser {
       padding-right: 1rem;
       padding-left: 0.3rem;
       padding: 0.5rem 1rem 0.5rem 0.3rem;
   }
   .forgetPassword, .foundUser {
       color: #409EFF;
   }

   .footer {
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: rgba(0,0,0,.5);
      color: #F5F5F5;
      width: 100%;
      font-size: 0.12rem;
      padding: 3px;
   } 
   a {
       color: #409EFF;
       display: inline-block;
   }



</style>